<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="22">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </el-col>
        <el-col :span="2">
          <el-button>重置</el-button>
          <el-button type="primary" @click="getUserList">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">账号/姓名：</el-col>
        <el-col :span="4">
          <el-input v-model="params.keyword" @keyup.enter="getUserList"></el-input>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-row>
        <el-col :span="23"></el-col>
        <el-col :span="1">
          <el-button type="primary" @click="addFn">添加</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="createTime" label="添加时间">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="loginTime" label="最后登录">
        <template #default="{ row }">
          {{ formatDate(row.loginTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="是否启用">
        <template #default="{ row }">
          <el-switch v-model="row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1" :inactive-value="0" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="editFn(row.id)"
            v-if="userStore.permissions.includes('editUser')">编辑</el-button>
          <el-button type="primary" link @click="allocRoleFn(row.id)" v-pm="'allocRole'">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex" style="justify-content: flex-end;">
      <el-pagination v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
        :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </div>

    <EditUser :show="editShow" @closed="closeFn" :edit-id="editId" />
    <AllocRole :show="roleDialogShow" :role-id="roleId" @close="roleCloseFn" />
  </div>
</template>
<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { getUserListApi } from '@/api'
import { reactive, ref, watch } from 'vue';
import { formatDate } from '@/common'
import EditUser from './editUser.vue';
import AllocRole from './allocRole.vue';
import axios, { CancelTokenSource } from 'axios';
import { useUserStore } from '@/store/userStore';
const userStore = useUserStore()

const params = reactive<IUserListParams>({
  keyword: '', pageNum: 1, pageSize: 10
})

const tableData = ref<UserList[]>([]);
const total = ref(0);

// 是否正在请求
let pending = false;
let source: CancelTokenSource;
const getUserList = () => {
  let CancelToken = axios.CancelToken;
  source = CancelToken.source();
  // 请求正在发送
  pending = true;
  getUserListApi(params, source.token).then(res => {
    if (res.code === 200) {
      // 渲染数据
      tableData.value = res.data.list;
      total.value = res.data.total
    }
  }).finally(() => {
    // 请求结束
    pending = false
  })
}
getUserList();

const editShow = ref(false);

const addFn = () => {
  editShow.value = true;
}

const closeFn = (isRefresh: boolean) => {
  if (isRefresh) {
    // 刷新表格
    getUserList();
  }
  editShow.value = false;
  // 更新一下 editId
  editId.value = 0;
}

const editId = ref(0);
const editFn = (id: number) => {
  editShow.value = true;
  editId.value = id;
}


const roleDialogShow = ref(false);
const roleId = ref(0);
const allocRoleFn = (id: number) => {
  roleDialogShow.value = true;
  roleId.value = id;
}

const roleCloseFn = () => {
  roleDialogShow.value = false
  roleId.value = 0
}


// 监听 当前面和页容易变化，发请求
watch([() => params.pageNum, () => params.pageSize], ([__, newSize], [_, oldSize]) => {
  // page变化了，要把 pageNum 重置为 1
  if (newSize !== oldSize) {
    params.pageNum = 1
  }
  if (pending) {
    source.cancel();
  }
  getUserList();

})
</script>
<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
}

:deep(.cell) {
  text-align: center;
}
</style>